$(function () {


    findCuisine();
})

function findCuisine() {
    let res = myAjax("/cuisine/findAll", {isShow: 1}, "get");
    // console.log(res);
    if (res != null) {
        setCuisineData(res);
    }

}

function setCuisineData(data) {
    let str = '';
    for (let i = 0; i < data.length; i++) {
        str += '<div id="cuisine' + data[i].id + '" onclick="gotoProductPage(' + data[i].id + ')">' + data[i].title + '</div>';
    }
    $("#cuisine").html(str);

    let id = sessionStorage.getItem("productId");
    getProductData(id);
}

function gotoProductPage(id) {
    sessionStorage.setItem("cuisineId", id);
    window.open("/html/product.html");
}

function getProductData(id) {
    let res = myAjax("/product/id", {id: id}, "get");
    // console.log(res);
    if (res.length == 1) {
        setData(res[0]);
        setLastData(null);
        setNextData(null);
    } else if (res.length == 2) {

        //    两条数据的情况下，则要区分 到底是当前的id是第一条数据还是第二天数据
        if (id == res[0].id) {
            setData(res[0]);
            setLastData(null);
            setNextData(res[1]);
        } else {
            setData(res[1]);
            setLastData(res[0]);
            setNextData(null);
        }

    } else if (res.length == 3) {
        setData(res[1]);
        setLastData(res[0]);
        setNextData(res[2]);
    }
}

function setData(data) {
    $("#imgHref").attr("src", data.imgHref);
    $("#marketPrice").html(data.marketPrice);
    $("#name").html(data.name);
    $("#content").html(data.content);
    // 下边是对菜系的字体设置颜色，一定要确保菜系的div已经加载完成
    //在赋值菜系样式的时候，应该将以前的样式清空，然后在赋值
    //怎么讲以前的样式清空？是不是应该得到所有菜系，然后赋值，就需要遍历
    $("#cuisine >div").each(function (index, obj) {
        $(this).css({"color": "black", "background-color": "rgb(243, 243, 243)"})
    });
    $("#cuisine" + data.cuisineId).css({"color": "white", "background-color": "rgb(230, 144, 57)"});
}

function setLastData(data) {
    $("#last").html(' <div style="cursor: pointer" onclick="getProductData(' + (data == null ? '' : data.id) + ')">上一个</div>\n' +
        '                    <div id="lastName">' + (data == null ? '无' : data.name) + '</div>')
}

function setNextData(data) {
    $("#next").html('<div style="cursor: pointer" onclick="getProductData(' + (data == null ? '' : data.id) + ')">下一个</div>\n' +
        '                    <div id="nextName">' + (data == null ? '无' : data.name) + '</div>');
}